import "./index.scss";
import React, { useState, useEffect } from "react";
import axios from "../../../../utils/http.jsx";
import { Button, Form, Input, Select, Table, Space, Modal, Radio } from "antd";
import PageName from "../../../../components/PageName/index.jsx";
import { useNavigate } from "react-router-dom";
const Advertisement = () => {
  // 获取广告数据
  useEffect(() => {
    getRed();
  }, []);
  //获取广告数据
  const getRed = () => {
    axios({
      url: "/ad/getAd",
      method: "get",
    })
      .then((res) => {
        setDataList(res.data);
      })
      .catch((err) => {});
  };
  // 路由跳转
  const navigate = useNavigate();
  const Look = (record) => {
    navigate("/home/ViewAdvertisement",{state:{ position: record.position }});
  };
  // 表格数据
  const [dataList, setDataList] = useState([]);
  // 表格列
  const columns = [
    {
      title: "编号", //表格列名
      dataIndex: "id", //该列对应数据字段
      key: "id", //该列唯一值
      align: "center",
    },
    {
      title: "广告位置", //表格列名
      dataIndex: "position", //该列对应数据字段
      key: "position", //该列唯一值
      align: "center",
    },
    {
      title: "尺寸",
      dataIndex: "size",
      key: "size",
      align: "center",
    },
    {
      title: "数量",
      dataIndex: "num",
      key: "num",
      align: "center",
    },
    {
      title: "操作",
      align: "center",
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => Look(record)}>查看</a>
        </Space>
      ),
    },
  ];
  return (
    <div>
      {/* <div className="RedPacket">
        <div className="RedPacketDiv">广告管理</div>
      </div> */}
      <PageName name="广告管理"></PageName>
      {/* 表格 */}
      <div>
        <Table
          className="RedPacketTable"
          columns={columns}
          pagination={{
            defaultCurrent: 1,
            total: dataList.length,
            defaultPageSize: 5,
            // 只有一页的时候是否隐藏
            hideOnSinglePage: true,
          }}
          dataSource={dataList}
          rowKey={(record) => record.id}
        />
      </div>
    </div>
  );
};

export default Advertisement;
